<template>
  <div id="poster">
    <div class="title">
      <h1>个人中心</h1>
    </div>
    <div class="user-container" style="display: flex;flex-direction: row;">
      <div style="width: 300px;text-align: center;padding: 120px 0px 0px 0px">
        <img src="../assets/icon_home/用户.png" style="width: 128px;height: 128px">
      </div>
      <div style="width: 400px">
        <el-form  model="UserForm">
          <h3 class="info">基本信息</h3>
          <el-form-item>
            <h5>昵称</h5>
            <el-input type="text" v-model="UserForm.petName" autocomplete="off" placeholder="输入您的昵称"/>
          </el-form-item>
          <el-form-item>
            <h5>个人网站</h5>
            <el-input type="text" v-model="UserForm.website" autocomplete="off" placeholder="请输入个人网站"/>
          </el-form-item>
          <el-form-item>
            <h5>简介</h5>
            <el-input type="text" v-model="UserForm.introduce" autocomplete="off" placeholder="介绍一下自己吧"/>
          </el-form-item>
          <el-form-item>
            <h5>邮箱</h5>
            <el-input type="text" v-model="UserForm.mail" autocomplete="off" placeholder="邮箱"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="Modify">修改</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import {modify} from "../api/index.js";

export default {
  name: "userCenter",
  data() {
    return {
      UserForm: {
        petName: '',
        website: '',
        introduce: '',
        mail: '',
      }
    }
  },
  mounted() {
  },
  methods: {
    Modify() {
      modify(this.UserForm).then((res) => {
        if(res.data.status === '200') {
          this.$message({
            message:'修改成功',
            type:'success'
          })
        }
      })
    }
  }
}
</script>

<style scoped>
#poster {
  background-position: center;
  height: 100%;
  width: 100%;
  background-size: cover;
  position: fixed;
}

.user-container {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 30px auto;
  width: 700px;
  padding: 35px 35px 15px 35px;
  background: #ffffff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}

.info {
  padding: 0 0px 15px 0;
  text-align: center;
}

.title {
  text-align: center;
  padding: 80px 0 80px 0;
  background-color: #9a8791;
}
</style>